<template>
  <div class="login-page">
    <!-- new type -->
    <div class="left-pane"></div>
    <div class="right-pane">
      <div class="login-pane">
        <div style="width: 400px;margin: auto;margin-bottom: 50px;">
          <img src="@/assets/images/bin-xa-logo-1B.png" alt="logo" style="width: 100%;">
        </div>
        <div style="width: 300px;margin: auto;">
          <div class="login-pane-welcome">物联网采集云平台</div>
          <div class="login-pane-form">
            <login-view-form :loginLoading="loading" :canNotClick="ifLoginSuccess" @on-success-valid="handleSubmit"></login-view-form>
          </div>
          <div style="text-align: left;position: absolute;bottom: 20px;">
            <span class="right-cont">Copyright {{$store.state.app.sysConfig.copyright}} © {{curYear}}</span>
            <span class="sys-version">Version {{$config.version}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginViewForm from '_c/login-view-form'
import LinkBtn from '_c/link-btn'
// import MD5 from 'js-md5'
import { mapMutations } from 'vuex'
// import { userJAELogin } from '@/api/account/user'
export default {
  name: 'LoginView',
  components: {
    LoginViewForm,
    LinkBtn
  },
  data () {
    return {
      env: process.env.NODE_ENV,
      loading: false,
      ifLoginSuccess: false,
      curYear: this.$store.state.app.currentYear,
      authNavObj: {},
      nav: [],
      routeNav: [],
      routeObj: {}
    }
  },
  methods: {
    ...mapMutations([
      'setTagNavList'
    ]),
    // 登录
    handleSubmit ({ userName, password, ifRemember }) {
      // 本地测试
      this.loading = true
      this.ifLoginSuccess = true
      window.sessionStorage.setItem('tokenJAE', '123')
      this.setTagNavList([])
      if (ifRemember) {
        let rememberUser = {
          userName,
          password
        }
        localStorage.setItem('rememberUser', JSON.stringify(rememberUser))
      } else {
        localStorage.removeItem('rememberUser')
      }
      this.$Message.success('登录成功！')
      // 转到首页
      setTimeout(() => {
        this.ifLoginSuccess = false
        // 当前系统路由
        this.$router.push({
          path: '/home'
        })
      }, 1000)
      this.ifLoginSuccess = false
      return false

      // 接口部分
      // let params = {
      //   cmd: 'login',
      //   token: 'ltoken',
      //   data: {
      //     mail: userName.trim(),
      //     pw: MD5(password)
      //   }
      // }
      // this.loading = true
      // // 适当地增加延迟展示效果
      // setTimeout(async () => {
      //   await userJAELogin(params).then(async res => {
      //     if (res.data.error > 0) {
      //       this.$Message.error(res.data.info)
      //       return false
      //     }
      //     this.ifLoginSuccess = true
      //     window.sessionStorage.setItem('tokenJAE', res.data.token)
      //     this.setTagNavList([])
      //     if (ifRemember) {
      //       let rememberUser = {
      //         userName,
      //         password
      //       }
      //       localStorage.setItem('rememberUser', JSON.stringify(rememberUser))
      //     } else {
      //       localStorage.removeItem('rememberUser')
      //     }
      //     this.$Message.success('登录成功！')
      //     // 转到首页
      //     setTimeout(() => {
      //       this.ifLoginSuccess = false
      //       // 当前系统路由
      //       this.$router.push({
      //         path: '/home'
      //       })
      //     }, 1000)
      //     this.ifLoginSuccess = false
      //   }).catch(err => {
      //     // 可能：401密码错误，400没有账号
      //     if (err.response.status === 400) {
      //       this.$Message.error('登陆失败，用户名或密码错误！')
      //     } else {
      //       this.$Message.error(`${err.response.status}！`)
      //     }
      //     console.log(err)
      //   })
      //   this.loading = false
      // }, 500)
    },
    // 拆解router
    getUserRoute (arr, parentPath = '') {
      arr.map(item => {
        this.routeNav.push(item.path)
        this.routeObj[parentPath + item.path] = Object.assign({}, item)
        if (item.children && item.children.length !== 0) {
          this.getUserRoute(item.children, item.path + '/')
        }
      })
    },
    // 拆解userNav
    getUserNav (arr) {
      arr.map(item => {
        this.nav.push(item.authorityValue)
        this.authNavObj[item.authorityValue] = Object.assign({}, item)
        if (item.children.length !== 0) {
          this.getUserNav(item.children)
        }
      })
    },
    // 根据接口返回数组组合菜单
    filterRoute (nodes) {
      let arrt = []
      for (let i = 0; i < nodes.length; i++) {
        let item = {
          path: nodes[i].authorityValue,
          name: 'error_404/' + nodes[i].authorityValue,
          meta: {},
          icon: nodes[i].authorityIcon || ''
        }
        if (this.routeObj[nodes[i].authorityValue]) {
          item.name = this.routeObj[nodes[i].authorityValue].name
          if (this.routeObj[nodes[i].authorityValue].meta) { item.meta = this.routeObj[nodes[i].authorityValue].meta }
          if (this.routeObj[nodes[i].authorityValue].iframeComponent) item.iframeComponent = this.routeObj[nodes[i].authorityValue].iframeComponent
        }
        item.meta.title = nodes[i].authorityName || ''
        item.meta.icon = nodes[i].authorityIcon || ''
        item.meta.menuId = nodes[i].authorityId || ''
        arrt.push(item)
        if (nodes[i].children) {
          item.children = this.filterRoute(nodes[i].children)
        }
      }
      return arrt
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './login-view.styl'
</style>
